<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="userInfo"
      status-icon
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="学号" prop="studentNo">
        <el-input
          readonly
          v-model="userInfo.studentNo"
          placeholder="请输入学号"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="studentName">
        <el-input
          v-model="userInfo.studentName"
          placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="studentPhone">
        <el-input
          v-model="userInfo.studentPhone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="studentEmail">
        <el-input
          v-model="userInfo.studentEmail"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="studentSex">
        <el-radio-group v-model="userInfo.studentSex" size="medium">
          <el-radio border :label="0"> 男 </el-radio>
          <el-radio border :label="1"> 女 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="studentBirthday">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="userInfo.studentBirthday"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <!-- <el-form-item label="班级" prop="class">
        <el-select v-model="sizeForm.class" placeholder="请选择班级">
          <el-option label="七年一班" value="0"></el-option>
          <el-option label="七年二班" value="1"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="入学日期" prop="studentInSchoolDate">
        <el-col :span="11">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="userInfo.studentInSchoolDate"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="学生形象">
        <el-upload
          class="upload-demo"
          accept=".jpg,.png"
          action=""
          show-file-list
          :before-upload="beforeUpload"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item label="学生学院" prop="department">
        <el-select v-model="userInfo.department" placeholder="请选择班级">
          <el-option label="信息技术学院" value="0"></el-option>
          <el-option label="金融学院" value="1"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="现住地址" prop="studentNowAddress">
        <el-input
          v-model="userInfo.studentNowAddress"
          placeholder="请输入现住地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="家乡地址" prop="studentHomeAddress">
        <el-input
          v-model="userInfo.studentHomeAddress"
          placeholder="请输入家乡地址"
        ></el-input>
      </el-form-item>
       <el-form-item label="个人介绍" prop="studentRecommend">
        <el-input
          v-model="userInfo.studentRecommend"
          placeholder="请输入个人介绍"
        ></el-input>
      </el-form-item>
      <el-form-item label="家长姓名" prop="studentParentName">
        <el-input
          v-model="userInfo.studentParentName"
          placeholder="请输入家长姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="家长电话" prop="studentParentPhone">
        <el-input
          v-model="userInfo.studentParentPhone"
          placeholder="请输入家长姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="父母职业" prop="studentParentJob">
        <el-input
          v-model="userInfo.studentParentJob"
          placeholder="请输入父母职业"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import rules from "../commons/validate";

import { useUpdateStudent } from "@/hooks/student";

import { mapState } from "vuex";

export default {
  name: "StudentEdit",
  data() {
    return {
      rules,
      fileList: [],
    };
  },

  computed: {
    ...mapState("user", ["userInfo"]),
  },

  mounted() {
    delete this.userInfo.loginStatus;
  },

  methods: {
    beforeUpload(file) {
      this.fileList.push(file);
      return false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // if (this.sizeForm.files.length === 0) {
          //  // 添加上修改头像的数据
          // }
          this.$message.info("修改中...");
          let student = new FormData();
          if(this.fileList[0]){
            student.append("studentAvatar",this.fileList[0])
          }
          for (let k in this.userInfo) {
            if (k === "studentBirthday" || k === "studentInSchoolDate") {
              student.append(k, new Date(this.userInfo[k]).getTime());
            } else {
              if(k !== "studentAvatar"){
                student.append(k, this.userInfo[k]);
              }
            }
          }
          const resInfo = await useUpdateStudent(student);
          if (resInfo.code === 201 && resInfo.message === "success") {
            this.$message.success("修改成功,重新登录后生效");
          } else {
            this.$message.error(resInfo.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>
